import React, {Component} from 'react';
import {
    Button,
    View,
    TextInput,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text
} from 'react-native';
import GlobalStyles from '../../res/styles/GlobalStyles';
import CheckBox from 'react-native-check-box';
import DataRepository from '../util/DataRepository';
import Toast from 'react-native-root-toast';

let timer;
let counDown = 60

export default class PhoneLoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: true,
            mobile: '',
            code: '',
            getCodeButton: styles.getCodeButton,
            getCodeButtonDisable: false,
            getCodeButtonText: '获取验证码',
            countDown: counDown
        }
    }
    setcheck() {
        this.setState({
            isChecked: !this.state.isChecked
        })
    }

    render() {
        return (
            <View>
                <View
                    flexDirection='row'
                    width='100%'
                    style={{
                    marginLeft: 24,
                    marginRight: 24,
                    marginTop: 48
                }}
                    alignItems='center'>
                    <Image
                        source={require('../../res/img/ic_mobile.png')}
                        style={{
                        height: 24,
                        width: 24
                    }}/>
                    <TextInput
                        underlineColorAndroid="transparent"
                        placeholder='手机号'
                        width='100%'
                        maxLength={11}
                        keyboardType='numeric'
                        onChangeText={(mobile) => this.setState({mobile: mobile})}
                        style={{
                        padding: 0,
                        marginLeft: 8
                    }}></TextInput>
                </View>
                <View style={[GlobalStyles.line, styles.line]}/>
                <View
                    flexDirection='row'
                    width='100%'
                    style={{
                    marginLeft: 24,
                    marginRight: 24,
                    marginTop: 8
                }}
                    alignItems='center'>
                    <Image
                        source={require('../../res/img/ic_code.png')}
                        style={{
                        height: 24,
                        width: 24
                    }}/>
                    <TextInput
                        underlineColorAndroid="transparent"
                        placeholder='验证码'
                        width='45%'
                        style={styles.codeInput}
                        onChangeText={(code) => this.setState({code: code})}
                        maxLength={6}
                        keyboardType='numeric'
                        style={{
                        marginLeft: 8,
                        padding: 0
                    }}></TextInput>

                    <TouchableOpacity
                        style={this.state.getCodeButton}
                        onPress={() => this.getCode()}
                        disabled={this.state.getCodeButtonDisable}>
                        <Text
                            style={{
                            color: 'white'
                        }}>{this.state.getCodeButtonText}</Text>
                    </TouchableOpacity>

                </View>
                <View style={[GlobalStyles.line, styles.line]}/>

                <View
                    flexDirection='row'
                    alignItems='center'
                    style={{
                    marginTop: 16
                }}>
                    <CheckBox
                        style={{
                        marginLeft: 24,
                        flex: 1
                    }}
                        onClick={() => this.setcheck()}
                        isChecked={this.state.isChecked}
                        rightText={'我已阅读并同意'}></CheckBox>
                    <TouchableOpacity>
                        <Text
                            style={{
                            color: GlobalStyles.primaryColor,
                            marginRight: '15%'
                        }}>《摆渡人用户服务协议》</Text>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity style={styles.loginButton} onPress={() => this.login()}>
                    <Text style={{
                        color: 'white'
                    }}>登录</Text>
                </TouchableOpacity>
            </View>
        );
    }

    countDown() {
        let countDown = this.state.countDown;
        this.setState({
            countDown: countDown,
            getCodeButtonText: countDown + 's'
        });
        timer = setInterval(() => {
            let countDown = this.state.countDown - 1;
            this.setState({
                countDown: countDown,
                getCodeButtonText: countDown + 's'
            });
            if (countDown == 0) {
                clearInterval(timer);
                this.setState({getCodeButton: styles.getCodeButton, getCodeButtonDisable: false, countDown: counDown, getCodeButtonText: '重新获取验证码'});
            }
            console.log(this.state.countDown);
        }, 1000);

    }
    componentWillUnmount() {
        clearInterval(timer);
    }
    getCode() {
        if (this.state.mobile == '') {
            Toast.show('请填写手机号');
            return;
        }
        this.setState({getCodeButtonText: '正在获取验证码'});
        this.setState({getCodeButton: styles.getCodeButtonDisable});
        this.setState({ getCodeButtonDisable: true });
        
        DataRepository
            .fetchRequestWithOutToken("app/user/verify_code?mobile=" + this.state.mobile)
            .then(res => {
                //请求成功
                if (res.code == 200) {
                    this.countDown();
                    Toast.show('获取验证码成功');
                } else {
                    Toast.show(res.message);
                    this.setState({getCodeButtonText: '获取验证码'});
                    this.setState({getCodeButton: styles.getCodeButton});
                    this.setState({getCodeButtonDisable: false});
                }
            })
            .catch(err => {
                Toast.show('获取验证码失败');
                this.setState({getCodeButtonText: '获取验证码'});
                this.setState({getCodeButton: styles.getCodeButton});
                this.setState({getCodeButtonDisable: false});
            })

    }
    login() {
        if (!this.state.isChecked) {
            Toast.show('登录需要同意用户协议');
            return;
        }
        if (this.state.mobile == '') {
            Toast.show('请填写手机号');
            return;
        }
        if (this.state.code == '') {
            Toast.show('请填写验证码');
            return;
        }
        let formData = {};
        formData.mobile = this.state.mobile;
        formData.verifyCode = this.state.code;
        DataRepository
            .fetchRequestWithOutToken("app/user/login", formData)
            .then(res => {
                if (res.code == 200) {
                    clearInterval(timer);
                    storage.save({key: 'token', data: res.data})
                    const {navigate} = this.props.navigation;
                    navigate('MainTab')
                } else {
                    Toast.show(res.message);
                }
            })
            .catch(err => {
                Toast.show('登录失败');

            })

    }

}

const styles = StyleSheet.create({
    getCodeButton: {
        width: 125,
        height: 35,
        backgroundColor: GlobalStyles.primaryColor,
        borderColor: GlobalStyles.primaryColor,
        borderWidth: 1,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center'
    },
    getCodeButtonDisable: {
        width: 125,
        height: 35,
        backgroundColor: 'grey',
        borderColor: 'grey',
        borderWidth: 1,
        alignItems: 'center',
        borderRadius: 5,
        justifyContent: 'center'
    },
    line: {
        marginLeft: 24,
        marginRight: 24,
        marginTop: 4
    },
    loginButton: {
        marginTop: 16,
        marginLeft: 24,
        marginRight: 24,
        padding: 12,
        backgroundColor: GlobalStyles.primaryColor,
        borderColor: GlobalStyles.primaryColor,
        borderWidth: 1,
        borderRadius: 5,
        alignItems: 'center'
    }
});